<script type="text/javascript" src="/resource/plupload/js/plupload.full.min.js"></script>
<div class="upbox">
    <{if $detail.upload_files}>
    <table id="uploaded_files_table" class="tblist">
    <tr>
        <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">上传类型</th>
        <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">文件名称</th>
        <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">备注</th>
        <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">操作</th>
    </tr>
        <{foreach from=$detail.upload_files item="file"}>
            <tr id="tr_uploaded_f<{$file.id}>">
                <td><{$file.type}></td>
                <td><{$file.name}></td>
                <td><{$file.comments}></td>
                <td><span onclick="uploaded_delete_file(<{$file.id}>)">删除</span></td>
            </tr>
        <{/foreach}>
    </table>
    <{/if}>
	<input type="hidden" name="files" value="<{$detail.upload_files_raw}>" id="upload_files">
    <div id="file_types">
        <label>上传文件类型</label>
        <select name="upload_file_types" id="upload_file_types">
            <{foreach from=$upload_file_types item="upload_file_type"}>
                <option value="<{$upload_file_type}>"><{$upload_file_type}></option>
            <{/foreach}>
        </select>
    	<a id="file_pickfiles" href="javascript:;">选择上传文件</a> 
    </div>

	<div id="file_filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
	<div id="file_container">
        <table id="upload_files_table" class="tblist">
        <tr>
            <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">文件类型</th>
            <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">文件名称</th>
            <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">文件操作</th>
            <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">上传进度</th>
            <th style="<{if $action == 'action_dianmian'}>background-color: #682F8A;<{else if $action == 'action_jingxiaoshang'}>background-color: #115F84;<{/if}>">备注</th>
        </tr>
        </table>

	</div>
    <div class="actions">
            <a id="file_uploadfiles" href="javascript:;">开始上传</a>
    </div>
</div>


<script type="text/javascript">

var upfile_types = {};

function upload_delete_file (id)
{ 
    uploader.removeFile(id); 
    $("#"+id+"tr").remove(); 
    upfile_types[id] = ''; 
    return false;
} 

function uploaded_delete_file (id)
{
    if (! confirm('确认要删除已上传的文件吗？'))
    {
        return false;
    }
    
    var files = $('#upload_files');
    if (files.length > 0)
    {
        var fval = files.val();
        var ids  = fval.split('|');
        var newids = new Array();
        for (var i = 0; i < ids.length; ++i)
        {
            if (id != ids[i] && ids[i] != '')
               newids.push(ids[i]);
            else
                $('#tr_uploaded_f' + id).remove();
        }
        files.val(newids.join('|'));
    }
}


var uploader = new plupload.Uploader({
	runtimes : 'html5,flash,silverlight,html4',
	browse_button : 'file_pickfiles', // you can pass in id...
	container: document.getElementById('file_container'), // ... or DOM Element itself
	url : '/test/upload/handle',
	flash_swf_url : '/resource/plupload/js/Moxie.swf',
	silverlight_xap_url : '/resource/plupload/js/Moxie.xap',
	
	filters : {
		max_file_size : '2mb',
		mime_types: [
			{title : "图片", extensions : "jpeg,jpg,gif,png"},
			{title : "文档", extensions : "doc,docx,xls,xlsx,ppt,pptx,zip,rar,7z"}
		]
	},

	init: {

        BeforeUpload: function (up, file) {
           uploader.setOption('multipart_params', {
            'id' : file.id,
            'type' : upfile_types[file.id],
            'comment' : $('#'+file.id+'comment').val()
            }); 
        },


        Error : function(up, err) { 
            alert("此文件上传失败！"); 
        },

		PostInit: function() {
			document.getElementById('file_filelist').innerHTML = '';

			document.getElementById('file_uploadfiles').onclick = function() 
            {
				uploader.start();
				return false;
			};


		},

        FilesAdded : function(up, files) { 
            plupload.each(files,function(file) { 
                ftype = $('#upload_file_types').val();
                upfile_types[file.id] = ftype;
                var str = '<tr id="'+file.id+'tr">' + 
                    '<td>' + ftype + '</td><td>' + file.name + '</td>' + 
                    '<td><button type="button" id="' + file.id + 'btn" onclick="upload_delete_file(\'' + file.id + '\')">删除</button></td>' + 
                    '<td id="' + file.id + '_progress"></td>' + 
                    '<td id="' + file.id + 'comment_td"><input type="text" name="' + file.id + 'comment" id="' + file.id + 'comment"></td>' + 
                    '</tr>';
                $("#upload_files_table").append(str);
            }); 
        }, 

		FileUploaded: function(up, file, info) {
            // Called when file has finished uploading
			var response = eval("("+info.response+")");
			var upfileid = response.uploadid;
            var files    = $('#upload_files');
            if (files.length > 0)
            {
                files.val(files.val() + '|' + upfileid);
            }

            $("#"+file.id+"btn").parent().html("上传完毕"); 
            $("#"+file.id+"btn").remove(); 
            $("#"+file.id+"comment_td").html($("#"+file.id+"comment").val());
        },

        UploadProgress : function(up, file) { 
            $("#"+file.id+"_progress").html('<span>'+ file.percent + "%</span>"); 
        }


	} // init
});

$(function () {
    uploader.init();
});

</script>
